<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入</title>
    <link rel="stylesheet" href="/statics/element/index.css">
    <style>
        *{ padding: 0px; margin: 0px;}
        a{ color: #666; text-decoration: none;}
        body{ font-size: 14px; line-height: 150%; color: #666;}
        [v-cloak]{ display: none; }
        #app{ padding-top: 100px;}
        #web_title{ font-size: 33px;}
        #web_desc{ color: #666;}
        #login_box{ margin: 0px auto; width: 350px; margin-top: 30px;}
        #login_btn{ width: 100%;}
        #verify_img{ width: 40%; float: right;}
        #footer{ margin: 0px auto; line-height: 200%; width: 100%; text-align: center; position: fixed; bottom: 40px;}
    </style>
</head>
<body>
<div id="app" v-cloak>
    <p align="center" id="web_title">    </p>
    <br>
    <p align="center" id="web_desc">    </p>
    <div id="login_box" v-loading="loading">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <p align="center">登陆系统</p>
            </div>
            <el-form ref="form" :model="form" :rules="rules" @submit.native.prevent>
                <el-form-item prop="user_name">
                    <el-input v-model="form.user_name" prefix-icon="el-icon-user" placeholder="请输入登陆账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="form.password" prefix-icon="el-icon-lock" placeholder="请输入登陆密码"></el-input>
                </el-form-item>
<!--                <el-form-item prop="vercode">-->
<!--                    <el-input v-model="form.vercode" prefix-icon="el-icon-picture-outline" placeholder="请输入验证码" style="width: 50%;"></el-input>-->
<!--                    <a href="javascript:" @click="refreshVerify" title="点击刷新"><img id="verify_img" src="{!:captcha_src()!}"></a>-->
<!--                </el-form-item>-->
                <el-form-item>
                    <el-button type="primary" native-type="submit" @click="onSubmit('form')" id="login_btn">点击登录</el-button>
                </el-form-item>
                <el-form-item>
                    用户名：admin 密码：123456
                </el-form-item>
            </el-form>
        </el-card>
    </div>
    <div id="footer">
        <p></p>
        <p><span></span></p>
    </div>
</div>
<script src="/statics/vue/vue.min.js"></script>
<script src="/statics/vue/axios.min.js"></script>
<script src="/statics/element/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            form: {
                user_name:'',
                password:'',
                verify:''
            },
            loading:false,
            rules: {
                user_name: [
                    { required: true, message: '请输入登陆账号', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入登录密码', trigger: 'blur' }
                ],
<!--                vercode: [-->
<!--                    { required: true, message: '请输入验证码', trigger: 'blur' }-->
<!--                ],-->
            }
        },
        methods: {
            onSubmit(formName) {
                let that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        axios.post('/check_login',this.form).then(function (res){
                            that.loading = false;
                            let data = res.data;
                            if(data.code==false){
                                that.$message.error(data.msg);
                                //that.refreshVerify();
                            }else{
                                window.location.href='/index';
                            }
                        }).catch(function(error){
                            that.loading = false;
                            console.log(error);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            refreshVerify(){
                var img = document.getElementById('verify_img');
                img.src = "/captcha?id="+Math.random();
            }
        },
    })
</script>
</body>
</html>